<template>
  <treeselect
    v-model="dept"
    :options="list"
    :placeholder="placeholder"
    :normalizer="normalizer"
    :show-count="true"
    v-bind="$attrs"
    v-on="$listeners"
    :disabled="disabled"
    :class="size"
    noResultsText="暂无"
  />
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name:"SelectTree",
  components:{Treeselect},
  data(){
    return{
      simpleDeptList:[],
      dept:this.value
    }
  },
  props: {
    value: {
      type: [String, Array,Number],
      default: null
    },
    deptType:{
      type:String,
      default: 'all'
    },
    disabled:{
      type:Boolean,
      default:false
    },
    placeholder:{
      type:String,
      default:"请选择"
    },
    size:{
      type:String,
      default:""
    },
    list:{
      type:Array,
      default:function () {
        return []
      }
    },
    option:{
      type:Object,
      default:()=>{
        return {id:"id",name:"name",children:"children"}
      }
    }
  },
  watch: {
    value(val) {
      this.dept = this.value;
    },
  },
  computed: {

  },
  created() {
  },
  methods:{
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node[this.option.children] && !node[this.option.children].length) {
        delete node[this.option.children];
      }
      return {
        id: node[this.option.id],
        label: node[this.option.name],
        children: node[this.option.children]
      };
    },
    changeValue(val) {
      this.$emit("input", val);
    },
  }
}
</script>
<style lang="scss" scoped>
.small{
  width:220px;
  ::v-deep .vue-treeselect__control{height:32px;}
  ::v-deep .vue-treeselect__placeholder, .vue-treeselect__single-value{
    line-height: 32px;
  }
}
</style>
